<template>
    <div>
        <div class="filter">
            <el-form :inline="true" :model="formInline" ref="ruleForm">
                <el-form-item label="车位管理者" prop="admName">
                    <el-input v-model="formInline.admName" placeholder="请输入车位管理者"></el-input>
                </el-form-item>
                <el-form-item label="车位编号" prop="number">
                    <el-input v-model="formInline.number" placeholder="请输入车位编号"></el-input>
                </el-form-item>
                <el-form-item label="车位类型" prop="type">
                    <el-select v-model="formInline.type" placeholder="请选择车位类型">
                        <el-option v-for="item in carOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <div class="add">
                <el-button type="primary" @click="add">新增车位</el-button>
            </div>
            <div class="data">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column fixed prop="admName" label="车位管理者" width="150">
                    </el-table-column>
                    <el-table-column prop="admPhone" label="车位管理者电话">
                    </el-table-column>
                    <el-table-column prop="buy" label="购买价格">
                    </el-table-column>
                    <el-table-column prop="number" label="车位编号">
                    </el-table-column>
                    <el-table-column prop="rent" label="租赁价格">
                    </el-table-column>
                    <el-table-column prop="type" label="车位类型">
                        <template slot-scope="scope">
                            <div>
                                {{stallType(scope.row.type)}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="getStallById(scope.row.id)">编辑</el-button>
                            <el-button @click="deleteStall(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page" :page-sizes="[10, 20]" :page-size="pageInfo.size" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
        <el-dialog :title="isAdd?'新增车位信息':'编辑车位信息'" width="850px" :visible.sync="dialogFormVisible" center>
            <el-form :model="addForm" label-width="150px" :rules="addRules" ref="addForm">
                <el-form-item label="车位管理者姓名" prop="admName">
                    <el-input v-model="addForm.admName"></el-input>
                </el-form-item>
                <el-form-item label="车位管理者电话" prop="admPhone">
                    <el-input v-model="addForm.admPhone"></el-input>
                </el-form-item>
                <el-form-item label="购买价格" prop="buy">
                    <el-input-number :min="0" v-model="addForm.buy"></el-input-number>
                </el-form-item>
                <el-form-item label="介绍" prop="introduce">
                    <el-input type='textarea' :row="4" v-model="addForm.introduce"></el-input>
                </el-form-item>
                <el-form-item label="车位编号" prop="number">
                    <el-input v-model="addForm.number"></el-input>
                </el-form-item>
                <el-form-item label="租赁价格" prop="rent">
                    <el-input-number :min="0" v-model="addForm.rent"></el-input-number>
                </el-form-item>
                <el-form-item label="车位类型" prop="type">
                    <el-radio-group v-model="addForm.type">
                        <el-radio :label="1">汽车位（不带充电）</el-radio>
                        <el-radio :label="2">新能源车位（带充电）</el-radio>
                        <el-radio :label="3">非机动车位（带充电）（小规格车）</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitForm('addForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from "../../../api";
export default {
    name: "car",
    data() {
        return {
            formInline: {
                admName: "",
                number: "",
                type: "",
            },
            pageInfo: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
            },
            dialogFormVisible: false,
            addForm: {
                admName: "",
                admPhone: "",
                buy: "",
                introduce: "",
                number: "",
                rent: "",
                type: "",
            },
            tableData: [],
            isAdd: true,
            addRules: {
                admName: [
                    {
                        required: true,
                        message: "请输入车位管理者姓名",
                        trigger: "blur",
                    },
                ],
                buy: [
                    {
                        required: true,
                        message: "请输入购买价格",
                        trigger: "blur",
                    },
                ],
                number: [
                    {
                        required: true,
                        message: "请输入车位编号",
                        trigger: "blur",
                    },
                ],
                introduce: [
                    { required: true, message: "请输入介绍", trigger: "blur" },
                ],
                rent: [
                    {
                        required: true,
                        message: "请输入租赁价格",
                        trigger: "blur",
                    },
                ],
                admPhone: [
                    {
                        required: true,
                        message: "请输入车位管理者电话",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确手机号",
                        trigger: "blur",
                    },
                ],
            },
            carOptions: [
                {
                    label: "汽车位（不带充电）",
                    value: "1",
                },
                {
                    label: "新能源车位（带充电）",
                    value: "2",
                },
                {
                    label: "非机动车位（带充电）（小规格车）",
                    value: "3",
                },
            ],
        };
    },
    mounted() {
        this.getStallList();
    },
    methods: {
        onSubmit() {
            this.pageInfo.currentPage = 1;
            this.getStallList();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            this.addForm.avatar = URL.createObjectURL(file.raw);
        },
        // 分页获取车位数据
        async getStallList() {
            try {
                const params = Object.assign(
                    {},
                    this.pageInfo,
                    this.formInline
                );
                const response = await api.car.getStallPage(params);
                if (response.data.code === 200) {
                    this.tableData = response.data.data.records;
                    this.pageInfo.total = response.data.data.total;
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 根据ID获取车位
        async getStallById(id) {
            this.isAdd = false;
            this.dialogFormVisible = true;
            try {
                const response = await api.car.getStallById({
                    stallId: id,
                });
                if (response.data.code === 200) {
                    this.addForm = response.data.data;
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 添加或者编辑提交
        async commitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isAdd) {
                        this.commitAddForm();
                    } else {
                        this.commitEditForm();
                    }
                    this.dialogFormVisible = false;
                    this.addForm = this.$options.data().addForm; //重置表单数据
                }
            });
        },
        // 提交添加用户
        async commitAddForm() {
            try {
                const response = await api.car.addStall(this.addForm);
                if (response.data.code === 200) {
                    this.$message.success("添加成功");
                    this.getStallList();
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 提交编辑用户
        async commitEditForm() {
            try {
                const response = await api.car.editStall(this.addForm);
                if (response.data.code === 200) {
                    this.$message.success("编辑成功");
                    this.getStallList();
                } else {
                    this.$message.error(response.data.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 点击新增按钮
        add() {
            this.isAdd = true;
            this.dialogFormVisible = true;
            this.addForm = this.$options.data().addForm;
        },
        // 删除车位
        deleteStall(id) {
            this.$confirm("确认删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    try {
                        const response = await api.car.deleteStall({
                            stallId: id,
                        });
                        if (response.data.code === 200) {
                            this.$message.success("删除成功");
                            this.getStallList();
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    } catch (error) {
                        this.$message.error(error);
                    }
                })
                .catch(() => {});
        },
        // 车位类型
        stallType(type) {
            let car;
            switch (type) {
                case 1:
                    car = "汽车位（不带充电）";
                    break;
                case 2:
                    car = "新能源车位（带充电）";
                    break;
                case 3:
                    car = "非机动车位（带充电）（小规格车）";
                    break;
                default:
                    break;
            }
            return car;
        },
        handleSizeChange(val) {
            this.pageInfo.size = val;
            this.getStallList();
        },
        handleCurrentChange(val) {
            this.pageInfo.currentPage = val;
            this.getStallList();
        },
    },
};
</script>

<style lang='less' scoped>
</style>